import img11 from "@/assets/images/iot/device/home/11.png";
import img12 from "@/assets/images/iot/device/home/12.png";
import img13 from "@/assets/images/iot/device/home/13.png";
import img14 from "@/assets/images/iot/device/home/14.png";
import img1 from "@/assets/images/iot/device/home/20.png";
import img4 from "@/assets/images/iot/device/home/4.png";
import extImg from "@/assets/images/login/6.png";
import cardBox from "@/components/CardBox/index";
import { useEcharts } from "@/hooks/useEcharts";
import * as echarts from "echarts";
import { ElDatePicker, ElProgress } from "element-plus";
import { defineComponent, onMounted, reactive, ref } from "vue";
import "./index.scss";
// 上方小模块(上线设备，今日流量，网关，告警设备)
const topCard = defineComponent({
	setup() {
		let data = reactive({
			cardList: [
				{ label: "上线设备", value: 333, diff: -11, icon: img14, bgNum: 16 },
				{ label: "今日流量", value: 333, diff: 11, icon: img11, bgNum: 18 },
				{ label: "网关", value: 333, diff: 11, icon: img13, bgNum: 17 },
				{ label: "告警设备", value: 333, diff: -11, icon: img12, bgNum: 19 }
			]
		});
		return () => {
			return (
				<div class="grid grid-cols-2 gap-4">
					{data.cardList.map((e: any) => {
						return (
							<div
								class="shadow-md card-item rounded-md"
								style={`background-image:url(src/assets/images/iot/device/home/${e.bgNum}.png)`}
							>
								<div class={"label"}>{e.label}</div>
								<div class={"value"}>
									<span>{e.value}</span>
									<img class="" src={e.icon} />
								</div>
								<div class={"desc"}>
									<span>较昨日</span>
									<span class={`device-diff-num ${e.diff > 0 ? "num-label-up" : "num-label-down"}`}>
										{e.diff > 0 ? "+" + e.diff : e.diff}
									</span>
								</div>
							</div>
						);
					})}
				</div>
			);
		};
	}
});

// 上方左侧圆环图
const topLeftChart = defineComponent({
	components: {
		cardBox
	},
	setup() {
		const topEcharts = ref<HTMLElement>();
		const pieData: any = [
			{ label: "网关1", value: 1 },
			{ label: "网关2", value: 1 },
			{ label: "网关2", value: 1 },
			{ label: "网关2", value: 1 }
		];
		const data = reactive({
			listData: pieData
		});
		const color = ["#7BACFF", "#9FC3FA", "#BBD6FF", "#D0E0FA", "#E7EFFC"];
		onMounted(() => {
			let myChart: echarts.ECharts = echarts.init(topEcharts.value as HTMLElement);
			const option: echarts.EChartsOption = {
				title: {
					text: "218",
					subtext: "网关总数",
					left: "50%",
					top: "45%",
					textAlign: "center",
					textStyle: {
						fontSize: 24,
						color: "#222222"
					},
					subtextStyle: {
						fontSize: 14,
						color: "#222222"
					}
				},
				tooltip: {
					trigger: "item"
				},
				grid: {
					left: 0
				},
				color: color,
				series: [
					{
						type: "pie",
						radius: ["70%", "50%"],
						center: ["50%", "50%"],
						silent: true,
						clockwise: true,
						startAngle: 150,
						data: pieData,
						labelLine: {
							show: false,
							length: 80,
							length2: 30,
							lineStyle: {
								width: 1
							}
						},
						label: {
							position: "outside",
							show: false,
							formatter: "{d}%",
							fontWeight: 400,
							fontSize: 19,
							color: "#a1a1a1"
						},
						itemStyle: {
							borderColor: "#fff",
							borderWidth: 2
						}
					}
				]
			};
			useEcharts(myChart, option);
		});
		return () => {
			return (
				<cardBox class="shadow-md" icon={img4} titleHeight="60px" title="网关类型分布">
					<div style="height: 100%;width: 100%;display: flex;">
						<div ref={topEcharts} style="height: 100%;width: 70%;margin-left:-5%"></div>
						<div style="height: 100%;width: 30%;" class="chart-list">
							{data.listData.map((e: any, index: number) => {
								return (
									<div class="chart-list-item">
										<div class="chart-list-item-d" style={"background-color:" + color[index % 5]}></div>
										<div class="chart-list-item-l">{e.label}</div>
										<div class="chart-list-item-v">{e.value}</div>
									</div>
								);
							})}
						</div>
					</div>
				</cardBox>
			);
		};
	}
});
// 中间数据趋势
import img5 from "@/assets/images/iot/device/home/5.png";
const dataTrend = defineComponent({
	components: {
		cardBox
	},
	setup() {
		const lineEcharts = ref<HTMLElement>();
		let dt = ref<String>();
		dt.value = moment().format("YYYY-MM-DD");
		const color = ["#7BAEFF", "#99E6A2"];
		onMounted(() => {
			let myChart: echarts.ECharts = echarts.init(lineEcharts.value as HTMLElement);
			let option: echarts.EChartsOption = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						label: {
							backgroundColor: "#6a7985"
						}
					}
				},
				legend: {
					data: ["设备总数", "在线设备"],
					left: "3%",
					icon: "circle",
					textStyle: {
						color: "#a1a1a1"
					}
				},
				grid: {
					left: "3%",
					right: "4%",
					bottom: "3%",
					containLabel: true
				},
				xAxis: [
					{
						type: "category",
						boundaryGap: false,
						data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
						axisLabel: {
							color: "#a1a1a1"
						}
					}
				],
				yAxis: [
					{
						type: "value",
						axisLabel: {
							color: "#a1a1a1"
						}
					}
				],
				color: color,
				series: [
					{
						name: "设备总数",
						type: "line",
						stack: "Total",
						areaStyle: {
							opacity: 0.3
						},
						showSymbol: false,
						smooth: true,
						emphasis: {
							focus: "series"
						},
						data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
						name: "在线设备",
						type: "line",
						stack: "Total",
						areaStyle: {
							opacity: 0.3
						},
						showSymbol: false,
						smooth: true,
						emphasis: {
							focus: "series"
						},
						data: [220, 182, 191, 234, 290, 330, 310]
					}
				]
			};
			useEcharts(myChart, option);
		});
		return () => {
			const slot = {
				title: () => {
					return (
						<div class="dataTrend-title">
							<div class="dataTrend-title-data-type active">本周</div>
							<div class="dataTrend-title-data-type">本月</div>
							<div class="dataTrend-title-data-type">本年</div>
							<ElDatePicker v-model={dt.value}></ElDatePicker>
						</div>
					);
				}
			};
			return (
				<cardBox icon={img5} v-slots={slot} titleHeight="60px" title="数据趋势">
					<div ref={lineEcharts} style="height: 100%;width: 100%;"></div>
				</cardBox>
			);
		};
	}
});
// 中间基础服务信息
import img10 from "@/assets/images/iot/device/home/10.png";
const basicsService = defineComponent({
	components: {
		cardBox
	},
	setup() {
		const barEcharts = ref<HTMLElement>();
		const color = ["#7BAEFF", "#99E6A2"];
		onMounted(() => {
			let myChart: echarts.ECharts = echarts.init(barEcharts.value as HTMLElement);
			let option: echarts.EChartsOption = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "shadow"
					}
				},
				grid: {
					top: 20,
					left: -20,
					right: 0,
					bottom: 0,
					containLabel: true
				},
				xAxis: [
					{
						type: "category",
						data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
						axisLabel: {
							color: "#a1a1a1"
						}
					}
				],
				yAxis: [
					{
						type: "value",
						show: false,
						axisLabel: {
							color: "#a1a1a1"
						}
					}
				],
				color: color,
				series: [
					{
						name: "Direct",
						type: "bar",
						emphasis: {
							focus: "series"
						},
						stack: "Ad",
						barWidth: "30%",
						data: [320, 332, 301, 334, 390, 330, 320]
					},
					{
						name: "Email",
						type: "bar",
						stack: "Ad",
						barWidth: "20%",
						emphasis: {
							focus: "series"
						},
						data: [120, 132, 101, 134, 90, 230, 210]
					}
				]
			};
			useEcharts(myChart, option);
		});
		return () => {
			return (
				<cardBox icon={img10} titleHeight="60px" title="基础服务信息">
					<div class="basicsService">
						<div class="basicsService-space">
							<div class="space-title">存储空间</div>
							<div class="space-title-content">
								<div class="space-value">1420G</div>
								<div class="space-label">较昨日</div>
								<div class="space-diff num-label-up">+ 58</div>
							</div>
						</div>
						<div class="basicsService-space">
							<div class="space-title">剩余存储空间</div>
							<div class="space-title-content">
								<div class="space-value">420G</div>
								<div class="space-label">较昨日</div>
								<div class="space-diff num-label-down">- 58</div>
							</div>
						</div>
						<div class="basicsService-progress">
							<ElProgress percentage={30} color="#04BE74" showText={false} strokeWidth={8} />
						</div>
						<div class="basicsService-space basicsService-port">
							<div class="space-title">购买端口数量</div>
							<div class="space-title-content">
								<div class="space-value">25</div>
								<div class="space-label">较昨日</div>
								<div class="space-diff num-label-up">+ 58</div>
							</div>
						</div>
						<div class="basicsService-space basicsService-port1">
							<div class="space-title">剩余端口数量</div>
							<div class="space-title-content">
								<div class="space-value">25</div>
								<div class="space-label">较昨日</div>
								<div class="space-diff num-label-down">+ 58</div>
							</div>
						</div>
						<div class="basicsService-chart" ref={barEcharts}></div>
					</div>
				</cardBox>
			);
		};
	}
});
// 下面运维引导
import img3 from "@/assets/images/iot/device/home/3.png";
import img6 from "@/assets/images/iot/device/home/6.png";
import img7 from "@/assets/images/iot/device/home/7.png";
import img8 from "@/assets/images/iot/device/home/8.png";
import img9 from "@/assets/images/iot/device/home/9.png";
const operation = defineComponent({
	components: {
		cardBox
	},
	setup() {
		return () => {
			return (
				<cardBox icon={img6} titleHeight="60px" title="运维引导">
					<div class="operation-module">
						<div class="operation-module-icon">
							<img src={img7} class="icon-type" />
							<img src={img3} class="icon-type1" />
							<img src={img8} class="icon-type" />
							<img src={img3} class="icon-type1" />
							<img src={img9} class="icon-type" />
						</div>
						<div class="operation-module-desc">
							<div class="operation-desc-item">
								<div class="operation-desc-item-title">第一步.设备接入配置</div>
								<div class="operation-desc-item-label">接入设备，配置设备基本信息，网关信息等</div>
							</div>
							<div class="operation-desc-item">
								<div class="operation-desc-item-title">第二步.日志排查</div>
								<div class="operation-desc-item-label">接入设备，配置设备基本信息，网关信息等</div>
							</div>
							<div class="operation-desc-item">
								<div class="operation-desc-item-title">第三步.实时监控</div>
								<div class="operation-desc-item-label">接入设备，配置设备基本信息，网关信息等</div>
							</div>
						</div>
					</div>
				</cardBox>
			);
		};
	}
});
// 下面事件通知
import img2 from "@/assets/images/iot/device/home/2.png";
import moment from "moment";
const notice = defineComponent({
	components: {
		cardBox
	},
	setup() {
		const slot = {
			title: () => {
				return <div>共计：20条</div>;
			}
		};
		const data = reactive({
			list: [
				{ label: "警告警告警告警告警告", type: 1, date: "2022-02-02 00:00:00" },
				{ label: "提示提示提示提示", type: 2, date: "2022-02-02 00:00:00" },
				{ label: "提示提示提示提示", type: 2, date: "2022-02-02 00:00:00" },
				{ label: "提示提示提示提示", type: 2, date: "2022-02-02 00:00:00" },
				{ label: "提示提示提示提示", type: 2, date: "2022-02-02 00:00:00" },
				{ label: "提示提示提示提示", type: 2, date: "2022-02-02 00:00:00" },
				{ label: "提示提示提示提示", type: 2, date: "2022-02-02 00:00:00" },
				{ label: "提示提示提示提示", type: 2, date: "2022-02-02 00:00:00" },
				{ label: "提示提示提示提示", type: 2, date: "2022-02-02 00:00:00" },
				{ label: "提示提示提示提示", type: 2, date: "2022-02-02 00:00:00" }
			]
		});
		return () => {
			return (
				<cardBox icon={img2} titleHeight="60px" title="事件通知" v-slots={slot}>
					<div class="notice-module">
						{data.list.map((e: any) => {
							return (
								<div class="notice-module-item">
									<div class={"notice-item-type" + e.type}>{e.type == 1 ? "告警" : "提示"}</div>
									<div class="notice-item-label">{e.label}</div>
									<div class="notice-item-date">{e.date}</div>
								</div>
							);
						})}
					</div>
				</cardBox>
			);
		};
	}
});

// 主体方法
const _define = defineComponent({
	setup() {
		return () => {
			return (
				<div class={"iot-device-home"}>
					<div class={"top-card grid grid-cols-12 gap-4 animate__animated animate__bounceInLeft"}>
						<div class={"top-card-left shadow-md rounded-md col-span-3 relative"}>
							<img src={img1} />
							<div class="bg absolute">
								<img src={extImg} />
							</div>
							<div class={"device-label"}>设备总数</div>
							<div class={"device-count"}>3234</div>
							<div class={"device-diff"}>
								<span>较昨日</span>
								<span class={"device-diff-num num-label-up"}>+10</span>
							</div>
						</div>
						<topCard class={"top-card-center col-span-6  bg-white p-4"}></topCard>
						<topLeftChart class={"top-card-right col-span-3"}></topLeftChart>
					</div>
					<div class={"grid grid-cols-12 gap-4 center-chart animate__animated animate__fadeIn"}>
						<dataTrend class={"col-span-7 shadow-md center-chart-left"}></dataTrend>
						<basicsService class={"col-span-5 shadow-md center-chart-right"}></basicsService>
					</div>
					<div class={"grid grid-cols-12 gap-4 bottom-chart animate__animated animate__fadeIn"}>
						<operation class={"col-span-7 shadow-md bottom-chart-left"}></operation>
						<notice class={"col-span-5 shadow-md bottom-chart-right"}></notice>
					</div>
				</div>
			);
		};
	}
});
export default _define;
